<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>账单查询</title>
    <link rel="stylesheet" href="../js/element-ui-2.13.0/lib/theme-chalk/index.css">
    <style>
        #whole {
            margin: 0 auto;
            border: 1px solid #a0e274;
            width: 500px;
            height: 500px;
            display: flex;
            justify-content: center; /*实现水平居中*/
            align-items: center; /*实现垂直居中*/
            top: 50%;
            left: 50%;
            position: absolute;
            margin: -250px 0 0 -250px;
            background: #a0e274;
        }

        body {
            background: #a0e274;
        }
    </style>
    <script src="../js/vue.js"></script>
    <script src="../js/element-ui-2.13.0/lib/index.js"></script>
    <script src="../js/axios-0.18.0.js"></script>
</head>
<body>
<div id="whole">
    <div>
        <el-link href="chargeAccounts.html">回到账单首页<i class="el-icon-view el-icon--right"></i> </el-link>
        <br>
        <el-select style="width: 453px" v-model="bill.consumptionType" placeholder="请选择消费类型"
                   @change="queryConsumptionContent" clearable>
            <el-option
                    v-for="item in consumptionTypes"
                    :label="item.label"
                    :value="item.value">
            </el-option>
        </el-select>
        <el-select style="width: 453px" v-model="bill.consumptionContent" placeholder="请选择消费内容" clearable>
            <el-option
                    v-for="item in consumptionContents"
                    :label="item.label"
                    :value="item.value">
            </el-option>
        </el-select>
        <br>
        <i style="color: white" class="el-icon-star-on"></i><font color="white"><b>(重要性)</b></font>
        &nbsp;&nbsp;&nbsp;&nbsp;
        <el-radio-group v-model="bill.necessityStr" size="medium">
            <el-radio-button label="必要"></el-radio-button>
            <el-radio-button label="可以不花"></el-radio-button>
            <el-radio-button label="完全没必要"></el-radio-button>
        </el-radio-group>
        <el-date-picker
                style="width: 523px"
                v-model="bill.timeRange"
                type="daterange"
                align="right"
                unlink-panels
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="yyyy-MM-dd"
                :picker-options="pickerOptions">
        </el-date-picker>
        <br>
        <el-button style="width: 910px" class="box" type="primary" @click="queryBills">查询</el-button>
        <template>
            <el-table
                    :cell-style="{'text-align':'center'}"
                    :data="tableData.data"
                    border
                    style="width: 100%">
                <el-table-column
                        align="center"
                        fixed
                        prop="index"
                        label="序号"
                        width="50px"
                >
                </el-table-column>
                <el-table-column
                        align="center"
                        fixed
                        prop="consumptionType"
                        label="消费类型"
                        width="100px"
                >
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="consumptionContent"
                        width="100px"
                        label="消费内容">
                </el-table-column>
                <el-table-column
                        align="center"
                        style="text-align: center"
                        prop="consumptionObject"
                        width="200px"
                        label="消费物品">
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="necessityStr"
                        width="100px"
                        label="重要性">
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="consumptionAmountStr"
                        width="100px"
                        label="总额">
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="createTime"
                        width="160px"
                        label="创建时间">
                </el-table-column>
                <el-table-column
                        align="center"
                        fixed="right"
                        label="操作"
                        width="100px">
                    <template slot-scope="scope">
                        <el-button @click="handleClick(scope.row)" type="text" size="small">删除</el-button>
                        <el-button @click="updateBill(scope.row)" type="text" size="small">编辑</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-input class="box"  v-model="consumptionAmount" >
                <template slot="prepend">总消费为：</template>
            </el-input>
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="bill.pageNum"
                    :page-sizes="[5, 10]"
                    :page-size="bill.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="tableData.total">
            </el-pagination>
        </template>
    </div>
</div>
</body>
<script>
    const app = new Vue({
        el: '#whole',
        data: {
            consumptionTypes: [],
            consumptionContents: [],
            consumptionAmount: "",
            bill: {
                username: "",
                realName: "",
                timeRange: [],
                pageSize: "5",
                pageNum: "1",
                orderByColumn: "",
                isAsc: "",
                necessityStr: "",
                consumptionType: "",
                consumptionContent: "",
                id: ""
            },
            tableData: {
                total: "",
                data: []
            },
            pickerOptions: {
                shortcuts: [{
                    text: '最近一周',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近一个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近三个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                        picker.$emit('pick', [start, end]);
                    }
                },{
                    text: '最近一年',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 365);
                        picker.$emit('pick', [start, end]);
                    }
                }
                ]
            }
        },
        methods: {
            handleSizeChange(val) {
                this.bill.pageSize = val;
                this.queryBills();
            },
            handleCurrentChange(val) {
                this.bill.pageNum = val;
                this.queryBills();
            },
            queryBills() {
                axios.post('https://3723r72n06.picp.vip/mylife/bill/queryBills', this.bill, {headers: {'conTent-Type': 'application/json'}}).then(response => {
                    this.tableData.data = response.data;
                    this.tableData.total = response.data[0].total;
                });
                axios.post('https://3723r72n06.picp.vip/mylife/bill/queryConsumptionAmount', this.bill, {headers: {'conTent-Type': 'application/json'}}).then(response => {
                    this.consumptionAmount = response.data;
                });
            },
            queryConsumptionType() {
                //获取consumptionTypes
                axios.post('https://3723r72n06.picp.vip/mylife/bill/queryConsumptionType', "", {headers: {'conTent-Type': 'application/json'}}).then(response => {
                    response.data.forEach(item => {
                        let arr = {
                            value: item,
                            label: item
                        };
                        this.consumptionTypes.push(arr);
                    });
                });
            },
            dealCookie() {
                // 对cookie操作
                var cookies = document.cookie;
                var cookie_array = cookies.split(";");
                for (var i = 0; i < cookie_array.length; i++) {
                    var cookie = cookie_array[i];
                    var array = cookie.split("=");
                    if (array[0] == "realName") {
                        this.bill.realName = array[1];
                    }
                    if (array[0] == " username") {
                        this.bill.username = array[1];
                    }
                }
            },
            queryConsumptionContent() {
                //获取consumptionContents
                this.consumptionContents = [];
                this.bill.consumptionContent = "";
                axios.post('https://3723r72n06.picp.vip/mylife/bill/queryConsumptionContent', this.bill, {headers: {'conTent-Type': 'application/json'}}).then(response => {
                    response.data.forEach(item => {
                        let arr = {
                            value: item,
                            label: item
                        };
                        this.consumptionContents.push(arr);
                    });
                });
            },
            toDay(){
                const today = new Date();
                var year = today.getFullYear();
                var day = today.getDate();
                var month = today.getMonth()+1;
                if (month < 10){
                    month = "0"+month;
                }
                if (day < 10){
                    day = "0"+day;
                }
                var date = year+"-"+month+"-"+day;
                this.bill.timeRange = [date,date];
            },
            handleClick(row){
                this.$confirm('此操作将永久删除该账单, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.bill.id = row.id;
                    axios.post('https://3723r72n06.picp.vip/mylife/bill/deleteBill', this.bill, {headers: {'conTent-Type': 'application/json'}}).then(response => {
                        if (response.data.code == 200) {
                            this.$message.success(response.data.msg);
                            this.queryBills();
                        } else if (response.data.code == 1006) {
                            this.$message.warning(response.data.msg);
                        }
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            updateBill(row){
                localStorage.setItem("id",row.id);
                localStorage.setItem("consumptionType",row.consumptionType);
                localStorage.setItem("accountType",row.accountType);
                window.location.href="updateBill.html";
            }
        },
        created() {
            this.dealCookie();
            this.queryConsumptionType();
            this.toDay();
            this.queryBills();
        }
    });
</script>
</html>